<template>
  <div class="activity">
    <table-title
        title="娱乐活动"
        button-text="发布活动"
        @click="addDetail">
    </table-title>

    <table-search :form="formList"></table-search>

    <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading">

      <el-table-column align="center" type="index" label="序号" width="64"></el-table-column>
      <el-table-column align="center" prop="activityName" label="名称"></el-table-column>
      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          {{ new Date(scope.row.time).format('yyyy-MM-dd hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="地点"></el-table-column>
      <el-table-column align="center" label="策划人">
        <template slot-scope="scope">
          {{ userObjectData[scope.row.userId].tuserName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动状态" width="96">
        <template slot-scope="scope">
          {{ getStatusText(scope.row.status, scope.row.time) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
              type="success"
              icon="el-icon-zoom-in"
              size="mini"
              @click="seeDetail(scope.row.activityId)">
          </el-button>

          <el-button
              type="primary"
              slot="reference"
              icon="el-icon-edit"
              size="mini"
              @click="editDetail(scope.row.activityId)">
          </el-button>

          <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              @click="deleteDetail(scope.row.activityId)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>
  </div>
</template>
<script>
import TableTitle from "../../../components/TableTitle";
import TableSearch from "../../../components/TableSearch";
import modelUser from "../../../models/user";
import modelAct from "../../../models/activity";

export default {
  name: "Activity",
  components: {TableSearch, TableTitle},
  data() {
    return {
      // 搜索表单
      formList: [
        {
          type: 'input',
          name: 'title',
          label: '标题',
          placeholder: '请输入标题'
        },
        {
          type: 'button',
          name: 'button1',
          isSearch: true,
          click: this.search
        }
      ],
      // 数据
      tableData: [
        /*{
          "activityId": 0,
          "activityName": "string",
          "address": "string",
          "content": "string",
          "status": "string",
          "thumb": "string",
          "time": "2021-04-24T07:26:20.419Z",
          "userId": 0
        }*/
      ],
      userObjectData: {},

      // 分页
      loading: true,
      currentPage: 1,
      totalCount: 1
    };
  },
  created() {
    /**
     * 获取数据
     */
    this.changePage(this.currentPage);
  },
  methods: {
    /**
     * 查看
     */
    seeDetail(id) {
      this.$router.push("/activity-detail/" + id);
    },

    /**
     * 发布
     */
    addDetail() {
      this.$router.push("/admin/activity-editor");
    },

    /**
     * 编辑
     */
    editDetail(id) {
      this.$router.push("/admin/activity-editor/" + id);
    },

    /**
     * 删除
     */
    deleteDetail(id) {
      this.$confirm("将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        modelAct.del(id).then(() => {
          // 获取数据
          this.changePage(1);
        });
      });
    },

    /**
     * 搜索
     */
    search(value) {
      if (value.title) {
        modelAct.getList({}, 1, 500)
            .then((response) => {
              modelUser.getUserObjectData().then((userObjectData) => {
                this.userObjectData = userObjectData;
                this.tableData = response.records;
                this.totalCount = response.pages;
                this.loading = false;
              });
            });
      }
      // 全部为空，重新加载
      else this.changePage(1);
    },

    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;

      modelAct.getList({}, this.currentPage, 15)
          .then((response) => {
            modelUser.getUserObjectData().then((userObjectData) => {
              this.userObjectData = userObjectData;
              this.tableData = response.records;
              this.totalCount = response.pages;
              this.loading = false;
            });
          });
    },

    /**
     * 获取状态
     *
     * @param status
     * @param startTime
     * @return {string}
     */
    getStatusText(status, startTime) {
      if (status == '0') {
        const now = new Date();
        const date = new Date(startTime);

        if (now > date) return '进行中';
        else return '未开始';
      }
      else return '已结束';
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/less/base.less";

.activity {
  color: @fontColor;
  min-height: 100%;
  background: white;
}
</style>
